<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>信用资产管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./dist/css/reset.css">
    <link rel="stylesheet" type="text/css" href="./dist/css/normalize.css">
    <link rel="stylesheet" href="./dist/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./dist/bootstrap-datelimepicker/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="./dist/css/cardManage.css">
    <style>

    </style>
</head>

<body>
    <!--=== 头部 导航 ===-->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="row clearfix">
                <div class="col-sm-3 col-md-3 navbar-header">
                    <a href="#" class="navbar-brand"><img class="logoImg" src="./dist/img/logo.png"> <span>信用资产管理系统</span> </a>
                </div>
                <ul class="col-sm-9 col-md-9 nav navbar-nav navbar-right">
                    <li class="col-sm-2 col-md-2"><a href="homePage.html">首页</a></li>
                    <li class="col-sm-2 col-md-2 "><a href="repayment.html">还款</a></li>
                    <li class="col-sm-2 col-md-2"><a href="payRecord.html">消费记录</a></li>
                    <li class="col-sm-2 col-md-2"><a href=" cardManage.html " class=" navItemActive ">卡片管理</a></li>
                    <li class="col-sm-2 col-md-2"><a href="#">商户管理</a></li>
                    <li class="col-sm-1 col-md-1"><a href=" setUp.html  ">设置</a></li>
                    <div class="loginOut"><a class="loginOut " href="# ">退出</a></div>
                </ul>
            </div>
        </div>
    </nav>
    <!-- === 主要内容 左右 === -->
    <div class="container content">
        <div class="row margin-top20 ">
            <!-- === 左边 === -->
            <section class="col-sm-3 col-md-3 sidebar ">
                <div class="carbonads ">
                    <div class="carbon-wrap ">
                        <img src="./dist/img/photo.png " alt=" " border="0 " height="67 " width="70 " style="max-width:70px; ">
                    </div>
                    <div class="catbon-text ">管理员 <span class="admin-name ">administrator</span></div>
                </div>
                <ul class="card-list ">
                    <li class="card-item ">
                        <div class="card-left ">
                            行用卡数量:
                        </div>
                        <div class="card-right ">16张</div>
                    </li>
                    <li class="card-item ">
                        <div class="card-left ">
                            总额度:
                        </div>
                        <div class="card-right ">￥22000</div>
                    </li>
                    <li class="card-item ">
                        <div class="card-left ">
                            可用额度：
                        </div>
                        <div class="card-right ">￥180000</div>
                    </li>
                    <li class="card-item ">
                        <div class="card-left ">
                            余额合计:
                        </div>
                        <div class="card-right ">￥9800</div>
                    </li>
                </ul>
                <form class="form-horizontal card-info-form clearfix ">
                    <div class="form-group ">
                        <label for="inputEmail3 " class="col-md-3 control-label ">名称</label>
                        <div class="col-md-9 ">
                             <input type="text " class="form-control "  placeholder="我自己的招商8522 ">

                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="usable-money " class="col-md-3 control-label ">固定</label>
                        <div class="col-md-9 ">
                            <input type="text " class="form-control "  placeholder="￥8500 ">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="inputPassword3 " class="col-md-3 control-label norightpadding">账单日</label>
                        <div class="col-md-9 ">
                            <input type="text " class="form-control " placeholder="25日">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="inputPassword3 " class="col-md-3 control-label ">可用</label>
                        <div class="col-md-9 ">
                            <input type="text " class="form-control " placeholder="￥780 ">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="inputPassword3 " class="col-md-3 control-label ">时间</label>
                        <div class="calendarInput input-group date form_date col-sm-9 col-md-9" data-date="" data-date-format="yyyy-mm-dd">
                            <input class="form-control" size="16" type="text" value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label norightpadding cursor-pointer" for="x1">还款日<input type="radio" class="fist-radio" id="x1" name="chose" value="0"></label>
                        <div class="col-md-2  norightpadding noleftpadding">
                            <select class="form-control card-option leftpadding2px norightpadding">
                                <option>1号</option>
                                <option>2号</option>
                                <option>3号</option>
                                <option>4号</option>
                                <option>5号</option>
                                 <option>6号</option>
                                <option>7号</option>
                                <option>8号</option>
                                <option>9号</option>
                                <option>10号</option>
                                 <option>11号</option>
                                <option>12号</option>
                                <option>13号</option>
                                <option>14号</option>
                                <option>15号</option>
                                 <option>16号</option>
                                <option>17号</option>
                                <option>18号</option>
                                <option>19号</option>
                                <option>20号</option>
                                 <option>21号</option>
                                <option>22号</option>
                                <option>23号</option>
                                <option>24号</option>
                                <option>25号</option>
                                <option>26号</option>
                                 <option>27号</option>
                                <option>28号</option>
                                <option>29号</option>
                                <option>30号</option>
                                <option>31号</option>
                            </select>
                        </div>
                        <label class="col-md-4 control-label norightpadding noleftpadding cursor-pointer " for="x2" style="margin-left: 9px;">还款天数<input type="radio" name="chose" id="x2" value="1"></label>
                        <div class="col-md-2  noleftpadding norightpadding">
                            <select class="form-control card-option  norightpadding leftpadding2px">
                                <option>18天</option>
                                <option>19天</option>
                                <option>20天</option>
                                 <option>21天</option>
                                <option>22天</option>
                                <option>23天</option>
                                <option>24天</option>
                                <option>25天</option>
                                <option>26天</option>
                                 <option>27天</option>
                                <option>28天</option>
                                <option>29天</option>
                                <option>30天</option>
                                <option>31天</option>
                                 <option>32天</option>
                                <option>33天</option>
                                <option>34天</option>
                                 <option>35天</option>
                                <option>36天</option>
                                <option>37天</option>
                                <option>38天</option>
                                <option>39天</option>
                                <option>40天</option>
                                 <option>41天</option>
                                <option>42天</option>
                                <option>43天</option>
                                <option>44天</option>
                                <option>45天</option>
                                <option>46天</option>
                                 <option>47天</option>
                                <option>48天</option>
                                <option>49天</option>
                                <option>50天</option>
                                <option>51天</option>
                                <option>52天</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="inputPassword3 " class="col-md-3 control-label ">临额</label>
                        <div class="col-md-9 ">
                            <input type="text " class="form-control linge" placeholder="￥780 ">
                             <div class="calendarInput noleftpadding input-group date form_date col-sm-7 col-md-7" data-date="" data-date-format="yyyy-mm-dd">
                            <input class="form-control" size="16" type="text" value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="inputday " class="col-md-3 control-label ">银行</label>
                        <div class="col-md-9">
                            <select class="form-control card-option ">
                                <option>交通银行</option>
                                <option>招商银行</option>
                                <option>光大银行</option>
                                <option>广发银行</option>
                                <option>浦发银行</option>
                            </select>
                        </div>
                    </div>
                    <button type="submit " class="btn btn-primary pull-right ">保存</button>
                </form>
                <div class="card-date-info .col-md-8 ">
                    <p class="text-left card-date-title ">账户信息</p>
                    <p class="card-date-content clearfix ">
                        <span class="text-left pull-left ">注册日期：</span>
                        <span class="text-right pull-right ">2018年1月12日</span>
                    </p>
                    <p class="card-date-content clearfix ">
                        <span class="text-left pull-left ">有效日期：</span>
                        <span class="text-right pull-right ">2019年1月12日</span>
                    </p>
                </div>
            </section>
            <!-- === 右边 === -->
            <article class="col-sm-9 col-md-9 article ">
                <div class="article-top col-sm-6 col-md-6 clearfix ">
                    <div class="calendarInput input-group date form_date col-sm-4 col-md-4" data-date="" data-date-format="yyyy-mm-dd">
                        <input class="form-control" size="16" type="text" value="" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <div class="col-sm-2 col-md-2 line"></div>
                    <div class="calendarInput input-group date form_date col-sm-4 col-md-4" data-date="" data-date-format="yyyy-mm-dd">
                        <input class="form-control" size="16" type="text" value="" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <button type="button" class="btn  btn-lg searchBtn">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                </div>
                <!-- ===右下=== -->
                <div class="article-bottom ">
                    <table class="table table-bordered ">
                        <thead class="account-list repay-money-list">
                            <tr>
                                <th class="col-sm-1 col-md-1 txetl">添加时间</th>
                                <th class="col-sm-2 col-md-2 textl">账户名称</th>
                                <th class="col-sm-1 col-md-1 textr">固定额度</th>
                                <th class="col-sm-1 col-md-1 textl">账单日</th>
                                <th class="col-sm-1 col-md-1 textr">可用额度</th>
                                <th class="col-sm-1 col-md-1 textl">还款日</th>
                                <th class="col-sm-1 col-md-1 textl">操作</th>
                                <th class="col-sm-1 col-md-1 textl">临时额度</th>
                                <th class="col-sm-1 col-md-1 textl">所属银行</th>
                                <th class="col-sm-1 col-md-1 textl">临额有效期</th>
                            </tr>
                        </thead>
                        <tbody class="account-item">
                            <tr>
                                <th class="txetl" scope="row ">2018430</th>
                                <td class="txetl">浦发AE白金2022</td>
                                <td class="textr">1000.00</td>
                                <td class="textl">16日</td>
                                <td class="textr">7900.00</td>
                                <td class="textl">27日</td>
                                <td class="textl">
                                    <button type="button" class="list-group-item  delete-repay-info">
                                        删除
                                    </button>/<button type="button" class="list-group-item change-repay-info" data-toggle="modal" data-target="#myDialog" data-whatever="修改">
                                        修改
                                    </button>
                                </td>
                                <td class="textl">6000.00</td>
                                <td class="textl">招商银行</td>
                                <td class="textl">2018.2.11</td>
                            </tr>
                            <tr>
                                <th class="txetl" scope="row ">2018430</th>
                                <td class="txetl">浦发AE白金2022</td>
                                <td class="textr">1000.00</td>
                                <td class="textl">16日</td>
                                <td class="textr">7900.00</td>
                                <td class="textl">27日</td>
                                <td class="textl">
                                    <button type="button" class="list-group-item  delete-repay-info">
                                        删除
                                    </button>/<button type="button" class="list-group-item change-repay-info" data-toggle="modal" data-target="#myDialog" data-whatever="修改">
                                        修改
                                    </button>
                                </td>
                                <td class="textl">6000.00</td>
                                <td class="textl">招商银行</td>
                                <td class="textl">2018.2.11</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </article>
            <!-- ===分页=== -->
            <nav aria-label="Page navigation " class="clearfix queryPage">
                <ul class="pagination pull-right ">
                    <li>
                        <a href="# " aria-label="Previous ">
                                   <span aria-hidden="true ">&laquo;</span>
                                    </a>
                    </li>
                    <li><a href="# ">1</a></li>
                    <li><a href="# ">2</a></li>
                    <li><a href="# ">3</a></li>
                    <li><a href="# ">4</a></li>
                    <li><a href="# ">5</a></li>
                    <li><a href="# ">6</a></li>
                    <li>
                        <a href="# " aria-label="Next ">
                                     <span aria-hidden="true ">&raquo;</span>
                                 </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <!-- === 还款详情修改 ===-->
    <div class="modal fade" id="myDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog small-dialog" role="document">
            <div class="modal-content change-repay">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">信用卡修改</h4>
                </div>
                <form class="form-horizontal repay-money card-info-form clearfix ">
                    <div class="form-group ">
                        <label for="inputEmail3 " class="col-md-3 control-label ">名称</label>
                        <div class="col-md-9 ">
                            <input type="text " class="form-control "  placeholder="我自己的招商8522">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="usable-money " class="col-md-3 control-label ">固定</label>
                        <div class="col-md-9 ">
                            <input type="text " class="form-control "  placeholder="￥8500 ">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="inputPassword3 " class="col-md-3 control-label ">账单日</label>
                        <div class="col-md-9 ">
                            <input type="text " class="form-control " placeholder="25日">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="inputPassword3 " class="col-md-3 control-label ">可用</label>
                        <div class="col-md-9 ">
                            <input type="text " class="form-control " placeholder="￥780 ">
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="inputPassword3 " class="col-md-3 control-label ">时间</label>
                        <div class="calendarInput input-group date form_date col-sm-9 col-md-9" data-date="" data-date-format="yyyy-mm-dd">
                            <input class="form-control" size="16" type="text" value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                      <div class="form-group">
                        <label class="col-md-4 control-label norightpadding cursor-pointer" for="x1">还款日<input type="radio" class="fist-radio" id="x1" name="chose" value="0"></label>
                        <div class="col-md-2  norightpadding noleftpadding">
                            <select class="form-control card-option leftpadding2px norightpadding">
                                <option>1号</option>
                                <option>2号</option>
                                <option>3号</option>
                                <option>4号</option>
                                <option>5号</option>
                                 <option>6号</option>
                                <option>7号</option>
                                <option>8号</option>
                                <option>9号</option>
                                <option>10号</option>
                                 <option>11号</option>
                                <option>12号</option>
                                <option>13号</option>
                                <option>14号</option>
                                <option>15号</option>
                                 <option>16号</option>
                                <option>17号</option>
                                <option>18号</option>
                                <option>19号</option>
                                <option>20号</option>
                                 <option>21号</option>
                                <option>22号</option>
                                <option>23号</option>
                                <option>24号</option>
                                <option>25号</option>
                                <option>26号</option>
                                 <option>27号</option>
                                <option>28号</option>
                                <option>29号</option>
                                <option>30号</option>
                                <option>31号</option>
                            </select>
                        </div>
                        <label class="col-md-4 control-label norightpadding noleftpadding cursor-pointer " for="x2" style="margin-left: 9px;">还款天数<input type="radio" name="chose" id="x2" value="1"></label>
                        <div class="col-md-2  noleftpadding norightpadding">
                            <select class="form-control card-option  norightpadding leftpadding2px">
                                <option>18天</option>
                                <option>19天</option>
                                <option>20天</option>
                                 <option>21天</option>
                                <option>22天</option>
                                <option>23天</option>
                                <option>24天</option>
                                <option>25天</option>
                                <option>26天</option>
                                 <option>27天</option>
                                <option>28天</option>
                                <option>29天</option>
                                <option>30天</option>
                                <option>31天</option>
                                 <option>32天</option>
                                <option>33天</option>
                                <option>34天</option>
                                 <option>35天</option>
                                <option>36天</option>
                                <option>37天</option>
                                <option>38天</option>
                                <option>39天</option>
                                <option>40天</option>
                                 <option>41天</option>
                                <option>42天</option>
                                <option>43天</option>
                                <option>44天</option>
                                <option>45天</option>
                                <option>46天</option>
                                 <option>47天</option>
                                <option>48天</option>
                                <option>49天</option>
                                <option>50天</option>
                                <option>51天</option>
                                <option>52天</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="inputPassword3 " class="col-md-3 control-label ">临额</label>
                        <div class="col-md-9 ">
                            <input type="text " class="form-control linge" placeholder="￥780 ">
                             <div class="calendarInput noleftpadding input-group date form_date col-sm-7 col-md-7" data-date="" data-date-format="yyyy-mm-dd">
                            <input class="form-control" size="16" type="text" value="" readonly>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="inputday " class="col-md-3 control-label ">银行</label>
                        <div class="col-md-9">
                            <select class="form-control card-option ">
                                <option>交通银行</option>
                                <option>招商银行</option>
                                <option>光大银行</option>
                                <option>广发银行</option>
                                <option>浦发银行</option>
                            </select>
                        </div>
                    </div>
                </form>
                <div class="modal-footer clearfix">
                    <button type="button" class="btn btn-primary no-btn pull-left" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary yes-btn pull-right">确认</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./dist/jquery/jquery-1.8.3.min.js "></script>
<script src="./dist/bootstrap/js/bootstrap.min.js "></script>
<script type="text/javascript " src="dist/bootstrap-datelimepicker/bootstrap-datetimepicker.min.js "></script>
<script type="text/javascript " src="dist/bootstrap-datelimepicker/bootstrap-datetimepicker.zh-CN.js "></script>
<script type="text/javascript ">
$('.form_date').datetimepicker({
    language: 'zh-CN',
    weekStart: 1,
    todayBtn: 1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0
});

$('#myModal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget) // 触发事件的按钮
    var recipient = button.data('whatever') // 解析出data-whatever内容
    var modal = $(this)
    modal.find('.modal-title').text("还款详情修改")
})
</script>

</html>
